<template>
    <t-modal title="配置生成" :width="450" :visible="visible" :footer="null" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
        <div style="display: flex;justify-content: space-around;">
            <div class="card-item" @click="cardClick('blank')">
                <div class="img-box">
                    <img src="~@/assets/img/report01.png"/>
                </div>
                <div class="text-box">
                    <div class="title">从空白创建</div>
                </div>
            </div>
            <div class="card-item" @click="cardClick('template')">
                <div class="img-box">
                    <img src="~@/assets/img/report02.png"/>
                </div>
                <div class="text-box">
                    <div class="title">从模板创建</div>
                </div>
            </div>
        </div>
        <div class="text-center text-bold margin-top-sm">
            <a-tooltip placement="topLeft">
                <template slot="title">
                    <span></span>
                </template>
                <span style="cursor: pointer;">如何选择？</span>
            </a-tooltip>
        </div>
    </t-modal>
</template>

<script>
    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            type: {
                type: String,
                required: true
            }
        },
        data() {
            return {};
        },
        created() {

        },
        methods: {
            cardClick(e) {
                this.$emit("click", e)
            }
        }
    };
</script>
<style lang="less" scoped>
    .card-item {
        transition: 0.3s all;
        cursor: pointer;
        width: 181px;
        border: 1px solid #F0F2F5;
        border-radius: 10px;
        padding-bottom: 15px;
        .img-box {
            padding: 40px 20px 20px;
            img {
                width: 100%;
            }
        }
    }

    .card-item:hover {
        transform: scale(1.02);
        border: 1px solid #1890ff;
        box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
    }

    .text-box {
        text-align: center;
        .title {
            font-size: 16px;
            color: #171a1d;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .text {
            font-size: 12px;
            color: rgb(206 206 206);
        }
    }

</style>
